<template>
	<view class="pageBox" :style="{paddingTop: statusBarHeight + 44 + 'px',}">
		<view class="topHead flex-between" :style="{top: statusBarHeight + 'px',}">
			<uni-icons type="back" size="24" @click="goBack"></uni-icons>
			<view class="title">
				我的银行卡
			</view>
			<view class="right" @click="onAddBtn('/pages/my/bank/add')">
				添加
			</view>
		</view>
		<view class="noData flex-center" v-if="!list.length">
			<image class="noDataImg" src="http://www.bobei.shop/static/third/homePopupImg.png"></image>
			<view class="noDataTitle">
				暂无银行卡
			</view>
		</view>
		<view class="content" v-if="list.length">
			<view class="listTitle">
				我的银行卡
			</view>
			<view class="list">
				<uni-swipe-action>
					<uni-swipe-action-item :threshold="0" v-for="item in list" :key="item.id">
						<view class="listItem">
							<view class="bank">
								{{ item.bankSubbranch }}
							</view>
							<view class="bankCard">
								{{ item.cardNo }}
							</view>
						</view>
						<template v-slot:right>
							<button class="deleteBtn" @click="onDeleteIcon(item.id)">删除</button>
						</template>
					</uni-swipe-action-item>
				</uni-swipe-action>

			</view>
		</view>

		<!-- 删除银行卡弹窗 -->
		<determined-popover :showTips="determinedShow" @tipsOpen="determineTipsOpen" @tipsClose="determineTipsClose"
			@onDeterClose="onDeterClose" @onPrefect="determineOnPrefect" :deterTitle="deterTitle"
			:deterContent="deterContent"></determined-popover>
	</view>
</template>

<script>
	import determinedPopover from "../../../components/determined-popover/determined-popover.vue";
	export default {
		components: {
			"determined-popover": determinedPopover,
		},
		data() {
			return {
				statusBarHeight: "",

				deleteId: "",
				determinedShow: false,
				deterTitle: "",
				deterContent: "",

				list: [],
			}
		},

		onLoad() {
			this.statusBarHeight = this.$mySysInfo().top;
		},
		onShow() {
			this.getList();
		},
		methods: {
			onDeleteIcon(id) {
				this.deleteId = id;
				this.deterTitle = "提示";
				this.deterContent = "确认删除？";
				this.determinedShow = true;
			},
			determineTipsOpen(param) {
				this.determinedShow = param;
			},
			determineTipsClose(param) {
				this.determinedShow = param;
			},
			onDeterClose() {
				this.determinedShow = false;
			},
			determineOnPrefect() {
				this.$post({
					module: 'Finance',
					interface: '1002',
					data: {
						id: String(this.deleteId)
					}
				}).then(res => {
					this.determinedShow = false;
					uni.showToast({
						title: "操作成功",
						icon: "none",
						duration: 1500
					})
					this.getList();
				})
			},

			getList() {
				this.$post({
					module: 'Finance',
					interface: '1000',
				}).then(res => {
					this.list = res.list;
				})
			},
			onAddBtn() {
				uni.navigateTo({
					url: '/pages/my/bank/add'
				})
			},

			goBack() {
				const pages = getCurrentPages()
				if (pages.length === 1) {
					if (typeof params === 'number') {
						history.go(-params)
					} else {
						history.back()
					}
				} else {
					uni.navigateBack({
						delta: 1
					});
				}
			}
		},
	}
</script>

<style scoped lang="scss">
	.pageBox {
		width: 100%;
		min-height: calc(100vh - var(--window-top));
		background-color: #FBFBFB;

		.topHead {
			background-color: #ffffff;
			height: 88rpx;
			width: 100%;
			padding: 0 32rpx;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 3;



			.title {
				font-size: 32rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #000000;
				position: absolute;
				top: 22rpx;
				left: 50%;
				transform: translate(-50%, 0);
			}

			.right {
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #F2615F;
			}
		}

		.noData {
			padding-top: 58rpx;
			flex-direction: column;

			.noDataImg {
				width: 480rpx;
				height: 312rpx;
			}

			.noDataTitle {
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #919398;
				line-height: 34rpx;
			}


		}

		.content {
			padding: 0 40rpx;

			.listTitle {
				padding-left: 30rpx;
				font-size: 32rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #000000;
				padding-top: 28rpx;
			}

			.list {
				padding-top: 28rpx;


				.listItem {
					width: 686rpx;
					height: 244rpx;
					background-image: url("http://www.bobei.shop/static/third/bankListItemBg.png");
					background-size: 100% 100%;
					background-repeat: no-repeat;
					margin-bottom: 24rpx;
					padding: 58rpx 0 0 90rpx;

					.bank {
						font-size: 28rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: normal;
						color: #FFFFFF;
					}

					.bankCard {
						font-size: 28rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: normal;
						color: #FFFFFF;
						margin-top: 42rpx;
					}
				}

				/deep/.uni-swipe_button-group {
					justify-content: center;
					align-items: center;
				}

				/deep/.uni-swipe {
					border-radius: 16rpx;
				}

				.deleteBtn {
					width: 76rpx;
					height: 76rpx;
					background: #F2615F;
					border-radius: 50%;
					font-size: 20rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					white-space: nowrap;
					margin: 0 0 0 30rpx;
				}



				.listItem:nth-last-of-type(1) {
					margin-bottom: 0;
				}
			}
		}
	}
</style>
